<template>
	<div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { useScript } from '/@/hooks/web/useScript';

const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=999fec27d4e861c0c34fb4e8d5fdb948';
defineProps({
	width: {
		type: String,
		default: '100%',
	},
	height: {
		type: String,
		default: 'calc(100vh - 78px)',
	},
});
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: A_MAP_URL });

async function initMap() {
	await toPromise();
	await nextTick();
	const wrapEl = unref(wrapRef);
	if (!wrapEl) return;
	const AMap = (window as any).AMap;
	new AMap.Map(wrapEl, {
		zoom: 11,
		center: [116.397428, 39.90923],
		viewMode: '3D',
	});
}

onMounted(() => {
	initMap();
});
defineExpose({
	wrapRef,
});
</script>
